<script setup lang="ts">
import { onMounted, reactive, watch } from "vue";

const props = defineProps<{ uid: string }>();
const emits = defineEmits(["update:uid"]);

const state = reactive({
	url: ""
});

const fetchCodeImage = async () => {
	emits("update:uid", null);
	return;
	const rs = await userService.getCaptcha<ServiceStructure>();

	if (rs.ok) {
		const { id, captchaImg } = rs.data;
		state.url = captchaImg;

		emits("update:uid", id);
	}
};

watch(
	() => props.uid,
	val => {
		if (!val || val === "") {
			fetchCodeImage();
		}
	},
	{ immediate: true }
);

onMounted(() => {
	// fetchCodeImage();
});
</script>

<template>
	<view class="picture-code-container">
		<wd-img class="img" :src="state.url" @click="fetchCodeImage" />
	</view>
</template>

<style lang="less" scoped>
.picture-code-container {
	flex: 0 0 232px;
	width: 100%;
	height: 80px;
	background: #fff;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	.img{
		width: 100%;
		height: 100%;
	}
}
</style>
